<template>
  <div style="width: 500px; margin: 0px auto; padding-top:190px;">
    <el-form ref="form" :model="login" label-width="80px">
      <el-form-item label="账号">
        <el-input v-model="login.user"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="login.upwd"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { http, login } from "./api/api";
export default {
  data() {
    return {
      login: {
        user: "",
        upwd: "",
      },
    };
  },
  methods: {
    onSubmit() {
      console.log()
      if (this.login.user == "") {
        this.$message.error("请输入账号");
      } else if (this.login.upwd == "") {
        this.$message.error("请输入密码");
      } else {
        //  登录的ajax
        this.$http
          .post(
            http + login,
            {
              username: this.login.user,
              password: this.login.upwd,
            },
            { emulateJSON: true }
          )
          .then(
            (data) => {
              console.log(data.data.data.token);
              if (data.data.msg === "用户名或密码错误") {
                this.$message.error("用户名或密码错误");
              } else if (data.data.msg === "成功") {
                localStorage.token = data.data.data.token;
                location.href = "/";
              }
            },
            (err) => {
              this.$message.error("登录失败");
            }
          );
      }
    },
  },
};
</script>

<style>
     html body {
        width: 100%;
        height: 100%;
     }
     body {
        background: url(./assets/1.jpg) no-repeat;
        background-size: 100% auto;
     }

</style>